<template>
  <div class="main_box">
    <div class="baosonglishi" @click="subjectSwitch = !subjectSwitch"><span>报送历史</span></div>
    <!-- <router-view></router-view> -->
    <el-collapse-transition>
      <div v-if="subjectSwitch === true">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="main_box_son">
              <el-row :gutter="30">

                <el-col :span="12">
                  <div class="grid-content bg-purple"/>
                  <div class="main_conent">
                    <div class="title1">今日数据</div>
                    <div class="divheight10"/>
                    <echart/>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple"/>
                  <div class="main_conent">
                    <div class="title1">数据准备</div>
                    <div class="divheight10"/>
                    <div class="baobiao_tab">
                      <div style="padding-top:35px;" class="progress-item">
                        <span>财务</span>
                        <el-popover
                          class="fontsize16"
                          placement="bottom"
                          title="财务数据准备情况"
                          width="200"
                          trigger="hover"
                          content="20%">
                          <el-progress slot="reference" :percentage="20"/>
                        </el-popover>
                      </div>
                      <div style="padding-top:45px;" class="progress-item">
                        <span>咨询</span>
                        <el-popover
                          class="fontsize16"
                          placement="bottom"
                          title="财务数据准备情况"
                          width="200"
                          trigger="hover"
                          content="100%">
                          <el-progress slot="reference" :percentage="percentageVal" :status="percentageVal>=100?'success':''"/>
                        </el-popover>
                      </div>
                    </div>
                  </div>

                </el-col>

              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="main_box_son baobiao_tab1">
                <div class="main_conent">
                  <el-row :gutter="20" type="flex" align="middle" class="baobiao_tab1">
                    <el-col :span="4">
                      <div class="grid-content bg-purple wunai"/>
                      <div>
                        <div class="circle1 color1" @click="tab='generate'">
                          <div class="circle_son1">
                            <span><i class="circle_span el-icon-tickets" style="font-size:24px"/></span>
                          </div>
                        </div>
                        <div class="bbsc">
                          <p>报表生成</p>
                          <p>96/100</p>
                          <p>已生成</p>
                          <p>未生成</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6" class="dian">
                      <el-row :gutter="10">
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="6"><div class="diansonbig" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple wunai"/>
                      <div>
                        <div class="circle1 color2" @click="tab='Audited'">
                          <div class="circle_son1">
                            <span><i class="circle_span el-icon-news" style="font-size:24px"/></span>
                          </div>
                        </div>
                        <div class="bbsc">
                          <p>报表审核</p>
                          <p>96/100</p>
                          <p>已生成</p>
                          <p>未生成</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6" class="dian">
                      <el-row :gutter="10">
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="6"><div class="diansonbig" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                        <el-col :span="3" class="paddingtop5"><div class="dianson" /></el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple wunai"/>
                      <div>
                        <div class="circle1 color3" @click="tab='Submited'">
                          <div class="circle_son1">
                            <span><i class="circle_span el-icon-tickets" style="font-size:24px"/></span>
                          </div>
                        </div>
                        <div class="bbsc">
                          <p>报表报送</p>
                          <p>96/100</p>
                          <p>已生成</p>
                          <p>未生成</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <transition name="fade" mode="out-in" appear>
          <template v-if="tab==='generate'">
            <report-generation v-if="Object.keys(tableData).length>0" :msg="tableData"/>
          </template>
          <template v-else-if="tab==='Audited'">
            <report-audit/>
          </template>
          <template v-else-if="tab==='Submited'">
            <report-submitted/>
          </template>
        </transition>
      </div>
      <div v-else-if="subjectSwitch === false">
        <report-history/>
      </div>
    </el-collapse-transition>
    <excel/>
  </div>
</template>

<script>
import ReportAudit from './components/ReportAudit'
import ReportSubmitted from './components/ReportSubmitted'
import ReportGeneration from './components/ReportGeneration'
import ReportHistory from './components/ReportHistory'
import echart from './components/echart'
import excel from './components/14excel'
import { test } from '@/api/ReportingManagement/index'
export default {
  name: 'AuditManagementStatements',
  components: {
    ReportAudit,
    ReportGeneration,
    ReportSubmitted,
    ReportHistory,
    echart,
    excel
  },
  data() {
    return {
      tableData: {},
      tab: 'generate',
      percentageVal: 100,
      subjectSwitch: true
    }
  },
  watch: {
    tab: {
      handler(newName, oldName) {
        this.tabChange()
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tabChange() {
      test({ type: this.tab }).then(response => {
        this.tableData = response.data
      })
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '~@/assets/common';
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.title {
  width: 100%
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}
.audit_first {
  padding 20px 0
}
.audit_first_span {
  font-size 14px
  padding-right 20px
  color $colorbluedark
}
.claswithwn {
  width 50%
  margin-top 20px
}
.el-pagination {
  margin 20px 0
}
.btn {
  height 100%
  display inline-block
}
.btnpr {
  padding-right 40px
}
.dian {
  height 160px
}
.wn1 {
  padding-right 20px
}
.btn2_c {
  text-align center
  margin-top 20px
}
div.gjsx {
  display inline-block
  font-size 16px
  padding 0 20px
  cursor:pointer
}
.displayib {
  display inline-block
  width :100%
}
.bgg {
  background #fbfbfb
  padding 10px 0
  margin-top 10px
}
.rotate{
 transform-origin:center center; //旋转中心要是正中间 才行
transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s; //过度时间 可调
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
 -o-transition: -o-transform 0.2s;
 -ms-transition: -ms-transform 0.2s;

}

.rotate1{
 transform-origin:center center;
transform: rotate(0deg); //返回原点
 -webkit-transform: rotate(0deg);
-moz-transform: rotate(deg);
-ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
transition: transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 -o-transition: -o-transform 0.2s;
 -ms-transition: -ms-transform 0.2s;

}
.baobiao_tab {
  height 240px
  .progress-item {
    padding-top 20px
  }
}
.baobiao_tab1 {
  height 312px
}
div.el-progress-bar__outer {
  height 20px!important
}
.circle1 {
  margin 0 auto
  border-radius 50%
  width:80px;
  height 80px
  box-sizing border-box
  background #fff
  position relative
  cursor pointer
}
.circle_son1 {
  position: absolute;
  width:50px;
  height 50px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align: center;
  border-radius 50%
}
.bbsc {
  margin 0 auto
  width 80px
  margin-top 50px
  p {
    text-align center
    line-height 20px
  }
}
.margint40 {
  margin-top 40px
}
.circle {
  cursor:pointer
}
.baosonglishi {
  position fixed
  right 0
  top 100px
  border 1px soild #eee
  z-index 2
  background #fff
  width 30px
  height 100px
  cursor pointer
}
.color1 {
  background #d0e9ff
}
.color2 {
  background #fff2d0
}
.color3 {
  background #fcdede
}
span>.el-icon-tickets {
  color #1a90fe
}
span>.el-icon-news {
  color #fabd15
}
.progress-item span {
  line-height 30px
}
.dianson {
  width 10px
  height 10px
  border-radius 50%
  background #d8d8d8
  text-align center
  margin 0 auto
}
.diansonbig {
  width 20px
  height 20px
  border-radius 50%
  background #d8d8d8
  text-align center
  margin 0 auto
}
span>.circle_span {
  line-height 50px
}
</style>
